<template>
  <div class="blog-about">
    <!-- 关于页内容 -->
    <main class="about-content">
      <!-- 标题 -->
      <h1 class="about-title">关于我</h1>

      <!-- 博主简介 -->
      <section class="about-section">
        <h2 class="section-title">博主简介</h2>
        <p class="section-text">
          大家好，我是技术小能手，一名热爱编程的全栈开发者。我专注于前端开发和后端架构设计，喜欢分享技术经验和学习心得。
        </p>
        <p class="section-text">
          希望通过这个博客，能够帮助更多人掌握编程技能，解决实际问题。
        </p>
      </section>

      <!-- 博客主题 -->
      <section class="about-section">
        <h2 class="section-title">博客主题</h2>
        <p class="section-text">
          本博客主要分享以下内容：
        </p>
        <ul class="section-list">
          <li>前端开发（Vue、React、JavaScript）</li>
          <li>后端开发（Django、Node.js、Python）</li>
          <li>数据库设计与优化</li>
          <li>DevOps 与云原生技术</li>
        </ul>
      </section>

      <!-- 联系方式 -->
      <section class="about-section">
        <h2 class="section-title">联系方式</h2>
        <p class="section-text">
          如果你有任何问题或建议，欢迎通过以下方式联系我：
        </p>
        <ul class="section-list">
          <li>邮箱：techmaster@example.com</li>
          <li>GitHub：<a href="https://github.com/techmaster" target="_blank">github.com/techmaster</a></li>
          <li>微博：<a href="https://weibo.com/techmaster" target="_blank">weibo.com/techmaster</a></li>
        </ul>
      </section>
    </main>
  </div>
</template>

<script setup>
// 关于页逻辑（如果需要）
</script>

<style scoped>
.blog-about {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.about-content {
  margin-top: 40px;
}

.about-title {
  font-size: 2.5rem;
  color: #1a73e8;
  text-align: center;
  margin-bottom: 40px;
}

.about-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 1.8rem;
  color: #1a73e8;
  margin-bottom: 20px;
}

.section-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
}

.section-list {
  list-style-type: disc;
  padding-left: 20px;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
}

.section-list li {
  margin-bottom: 10px;
}

.section-list a {
  color: #1a73e8;
  text-decoration: none;
}

.section-list a:hover {
  text-decoration: underline;
}
</style>